// components/popup/index.js
const app = getApp()
Component({
  options: {
    multipleSlots: true
  },
  /**
   * 组件的属性列表
   */
  properties: {
    visible: {
      type: Boolean,
      value: false,
      observer(newVal) {
        console.log(app)
        if (newVal) {
          this.setData({
            isShow: true
          })
          setTimeout(() => {
            this.fadeInMask();
            if (this.data.type == 'botton') {
              this.appearBotton()
            }
          }, 60)
        } else {
          // this.fadeOutMask();
          if (this.data.type == 'botton') {
            this.appearOutBotton()
          }
          this.fadeOutMask();
          setTimeout(() => {
            this.setData({
              isShow: false
            })
          }, 300)
        }
      }
    },
    type: {
      type: String,
      value: "center",
    },
    isCustom: {
      type: Boolean,
      value: false
    }
  },
  data: {
    isShow: false,
    maskAnimation: {},
    bottomAnimation: {},
    topBarInfo: { // 顶部标题栏动态设置
      navBarHeight: app.globalData.navBarHeight,
      menuRight: app.globalData.menuRight,
      menuTop: app.globalData.menuTop,
      menuHeight: app.globalData.menuHeight,
    },
  },
  methods: {
    // 淡入遮罩层
    fadeInMask: function () {
      const animation = wx.createAnimation({
        duration: 300, // 动画持续时间
        timingFunction: 'ease-in-out', // 动画效果
        delay: 0 // 延迟时间
      });

      // 设置动画
      animation.opacity(1).step();

      // 应用动画
      this.setData({
        maskAnimation: animation.export()
      });

    },
    // 淡出遮罩层
    fadeOutMask: function () {
      const animation = wx.createAnimation({
        duration: 300, // 动画持续时间
        timingFunction: 'ease-in-out', // 动画效果
        delay: 0 // 延迟时间
      });

      // 设置动画
      animation.opacity(0).step();

      // 应用动画
      this.setData({
        maskAnimation: animation.export()
      });
    },

    // 底部出现
    appearBotton: function () {
      const animation = wx.createAnimation({
        duration: 300,
        timingFunction: 'ease-in-out',
        delay: 0
      });

      animation.translateY(0).step();
      this.setData({
        bottomAnimation: animation.export()
      });
    },
    // 底部消失
    appearOutBotton: function () {
      const animation = wx.createAnimation({
        duration: 300,
        timingFunction: 'ease-in-out',
        delay: 0
      });

      animation.translateY(600).step();
      this.setData({
        bottomAnimation: animation.export()
      });
    },
    // 关闭弹框
    closePopup() {
      this.triggerEvent("closePopup")
    },
    // 阻止关闭弹窗
    preventClose: function () {
      // 阻止点击事件冒泡
    }
  }
})